<!--
 * @Author: yuqf yuqf@damddos.com
 * @Date: 2023-08-31 08:51:29
 * @FilePath: \ds-brain-web\src\components\AutoSwiper\index.vue
-->
<template>
  <div class="auto-swiper">
    <div
      v-if="swiperList && swiperList.length !== 0"
      class="header"
      :style="{ width }"
    >
      <slot name="header"></slot>
    </div>
    <swiper-container
      v-if="swiperList && swiperList.length >= minShow"
      init="false"
      class="swiper"
      :style="{
        width,
        height: `${height}px`
      }"
    >
      <swiper-slide
        v-for="(item, index) in swiperList"
        :key="index"
        ref="slide"
        class="stop-swiping"
      >
        <slot :item="item"></slot>
      </swiper-slide>
    </swiper-container>
    <div
      v-else-if="
        swiperList && swiperList.length > 0 && swiperList.length < minShow
      "
      class="swiper"
      :style="{ width, height: `${height}px` }"
    >
      <div
        v-for="(item, index) in swiperList"
        :key="index"
        :style="{
          marginBottom:
            index === swiperList.length - 1 ? '0' : `${spaceBetween}px`
        }"
      >
        <slot :item="item"></slot>
      </div>
    </div>
    <div
      v-else
      class="swiper"
      :style="{
        width,
        height: `${height}px`,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: '#fff'
      }"
    >
      <div>暂无数据</div>
    </div>
  </div>
</template>

<script>
import { register } from 'swiper/swiper-element-bundle'
register()
export default {
  name: 'AutoSwiper',
  props: {
    // 滚动展示区域宽度
    width: {
      type: String,
      default: '100%'
    },
    // 滚动展示区域高度
    height: {
      type: Number,
      required: true
    },
    // 滚动速度(ms)
    speed: {
      type: Number,
      default: 2000
    },
    // 每次滚动延迟(ms)
    delay: {
      type: Number,
      default: 500
    },
    // 最小滚动行数
    minShow: {
      type: Number,
      default: 5
    },
    // 禁止滚动
    noSwiping: {
      type: Boolean,
      default: true
    },
    // 展示数据列表
    swiperList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      mySwiper: null,
      swiperOptions: {
        loop: true,
        direction: 'vertical',
        speed: this.speed,
        slidesPerView: this.minShow,
        autoplay: {
          delay: this.delay,
          disableOnInteraction: false,
          pauseOnMouseEnter: true
        },
        freeMode: {
          enabled: true
        },
        noSwiping: this.noSwiping,
        noSwipingClass: 'stop-swiping'
      }
    }
  },
  watch: {
    swiperList: {
      handler() {
        this.$nextTick(() => {
          this.mySwiper = document.querySelector('swiper-container')
          if (this.mySwiper) {
            this.initSwiper()
          }
        })
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.mySwiper = document.querySelector('swiper-container')
      if (this.mySwiper) {
        this.initSwiper()
      }
    })
  },
  methods: {
    initSwiper() {
      Object.assign(this.mySwiper, this.swiperOptions)
      this.mySwiper.onmouseenter = () => {
        this.mySwiper.swiper.autoplay.stop()
      }
      this.mySwiper.onmouseleave = () => {
        this.mySwiper.swiper.autoplay.start()
      }
      this.mySwiper.initialize()
      this.mySwiper.swiper.autoplay.start()
    }
  }
}
</script>

<style lang="scss" scoped></style>
